<template>
	<view class="container">
		<u-navbar title="首页" :isBack="false" :background="{ background: '#de2415' }">
			<view class="u-nav-slot" slot="left">

				<view style="display: flex;margin-left: 20rpx;" @click="goaddConsult()">
					<u-icon name="/static/image/zx.png" size="40"></u-icon>
					<view style="color: #FFFFFF;padding-left: 20rpx" @click="goaddConsult()">我要咨询</view>
				</view>
			</view>

		</u-navbar>
		<view class="shang">

			<view class="u-content" style="margin-bottom: 20px;">
				<view v-if="isSearch" style="margin:0  20rpx;">
					<u-input placeholder="请输入" placeholderStyle="color:white;" clearable @confirm="sub()"
						@blur="isSearch = false">
					</u-input>
				</view>
				<view @click="isSearch = true" v-if="!isSearch"
					style="display: flex;color: #FFFFFF;align-items: center;height: 100%;justify-content: center;">
					<u-icon name="/static/image/search.png" size="35"></u-icon>
					<view style="margin-left: 20rpx;">搜索</view>
				</view>
			</view>
			<view class="img">
				<image style="width: 690rpx;height: 254rpx;"
					src="https://huboshizb.bigchun.com/uploads/20220912/5c5182eea102f7e71a59745a60333f91.png"></image>
			</view>
		</view>
		<view class="zhong">

			<view class="item">
				<view style="display: flex;flex-direction: column;">
					<view @click="toSc()">
						<view>
							<image style="width: 72rpx;height: 72rpx;" src="../../static/image/fenxiao82.png"></image>
						</view>
						<view class="title">珠宝商城</view>
					</view>
					<view class="xia" @click="toTxz()">
						<view>
							<image style="width: 72rpx;height: 72rpx;" src="../../static/image/fenxiao85.png"></image>
						</view>
						<view class="title">珠宝同学会</view>
					</view>
				</view>
				<view style="display: flex;flex-direction: column;">
					<view @click="toZbzx()">
						<view>
							<image style="width: 72rpx;height: 72rpx;" src="../../static/image/fenxiao83.png"></image>
						</view>
						<view class="title">珠宝咨询</view>
					</view>
					<view class="xia" @click="toPx()">
						<view>
							<image style="width: 72rpx;height: 72rpx;" src="../../static/image/fenxiao86.png"></image>
						</view>
						<view class="title">珠宝培训</view>
					</view>
				</view>
				<view style="display: flex;flex-direction: column;">
					<view @click="toZx()">
						<view>
							<image style="width: 72rpx;height: 72rpx;" src="../../static/image/fenxiao84.png"></image>
						</view>
						<view class="title">珠宝资讯</view>
					</view>
					<view class="xia" @click="toZbdczs()">
						<view>
							<image style="width: 72rpx;height: 72rpx;" src="../../static/image/fenxiao87.png"></image>
						</view>
						<view class="title">珠宝典藏证书</view>
					</view>
				</view>
			</view>
		</view>

		<view class="boxzx">
			<view class="zx">
				最新咨询
			</view>
			<view class="xx">
				<image style="width: 36rpx;height: 36rpx;" src="../../static/image/fenxiao88.png"></image>
			</view>
			<view class="ti">
				{{contitle}}
			</view>
		</view>
		<view class="data">
			<scroll-view scroll-x="true">
				<view style="display: flex;">
					<view v-for="item in datalist" style="margin-left: 24rpx;">
						<view class="dataitem"
							:style="{ backgroundImage: `url(https://huboshizb.bigchun.com${item.imgs_arr[0]})` }"
							@click="goPage('/pages/jewel/consultdetail?id=' + item.id)">
							<!-- https://huboshizb.bigchun.com -->
							<!-- 	<view class="itemnum">
								{{item.reward_sum}}
							</view> -->
							<view class="itemname">
								{{item.title}}
							</view>
							<view v-if="item.status == '0'" class="itemstatus" style="background: #FF8A00">
								待解决咨询
							</view>
							<view v-else-if="item.status == '1'" class="itemstatus" style="background: #2BC78A">
								已解决咨询
							</view>
						</view>

					</view>
				</view>
			</scroll-view>
		</view>
		<view>
			<view class="title_box">
				<view class="yname">商城推荐</view>
				<view>
					<view style="position: relative;display: flex;">
						<view class="dian"></view>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true">
				<!-- 		<view v-for="item in zxList" class="zxlist" v-if="handleitem=='咨询展厅'">
			    <view class="zxbox" @click="todetail()">
			        <view style="position: relative;">
			            <image style="width: 214rpx;height: 156rpx;" :src="item.img"></image>
			        </view>
			        <view class="box-you">
			            <view class="zxname">
			                {{item.name}}
			            </view>
			            <view class="zxmoney">
			                ￥{{item.money}}
			            </view>
			        </view>
			    </view>
			</view> -->
				<view v-for="(item,index) in shopList" :key="index" class="zxlist">
					<view class="zxbox" @click="goPage('/pages/goods/detail?id=' + item.id)">
						<view style="position: relative;">
							<image mode="aspectFit" style="width: 214rpx;height: 156rpx;" :src="item.image"></image>
						</view>
						<view class="box-you">
							<view class="zxname">
								{{item.title}}
							</view>
							<view class="zxmoney">
								￥{{item.price}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputVal: '',
				// navbar:this.vuex_config.navbar,
				isSearch: false,
				contitle: '',
				zxList: [
					//    {
					//        id:0,
					//        name:'蔷薇珠宝项链?',
					//        money:120,
					// 	img:'../../static/image/zx2.png'
					//    },
					//    {
					//        id:1,
					//        name:'PIAGFT白金玫瑰耳环',
					//        money:17800,
					// 	img:'../../static/image/zx3.png'
					//    },
					//    {
					//        id:2,
					//        name:'金钻镶钻戒指',
					//        money:65000,
					// 	img:'../../static/image/zx4.png'
					//    },
					// {
					//     id:3,
					//     name:'白金戒指镶钻',
					//     money:68000,
					// 	img:'https://huboshizb.bigchun.com/uploads/20220912/4ade7b7c69471880e614a651475e71bd.png'
					// },
				],
				handleitem: '咨询展厅',
				titleList: [
					"咨询展厅", "商城推荐"
				],
				searchValue: '123123',
				datalist: [
					// {
					// 	id: 0,
					// 	name: '怎样选择红宝石呢？',
					// 	num: "1779",
					// 	status: '已解决咨询',
					// 	zt: '1'
					// },
					// {
					// 	id: 1,
					// 	name: '冰种翡翠怎么鉴别？',
					// 	num: "1778",
					// 	status: '待解决咨询',
					// 	zt: '0'
					// },
					// {
					// 	id: 2,
					// 	name: '怎样鉴别钻石上...',
					// 	num: "1777",
					// 	status: '已解决咨询',
					// 	zt: '1'
					// },
					// {
					// 	id: 3,
					// 	name: '怎样鉴别钻石上...',
					// 	num: "1777",
					// 	status: '已解决咨询',
					// 	zt: '1'
					// },
				],
				shopList: []
			};
		},
		onShow() {
			this.getNowZx()
			this.getShop()
		},
		onLoad(e) {
			let invite_id = e.invite_id || '';
			if (e.scene) {
				const scene = decodeURIComponent(e.scene);
				invite_id = this.$util.getQueryString('invite_id', scene) || invite_id;
			}
			if (invite_id) {
				this.$u.vuex('vuex_invite_id', invite_id);
			}

		},
		computed: {

		},
		methods: {
			toSc() {
				console.log('222222')
				uni.switchTab({
					url: '/pages/category/index'
				})
			},
			//商城推荐
			getShop() {
				this.$api.getGoodsList({}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						this.shopList = res.data.data
						console.log('shopList', this.shopList)
					}
				});
			},
			//获取最新咨询列表
			getNowZx() {
				this.$api.infoList({}).then(res => {
					console.log('res', res)
					if (res.code == 1) {
						if (res.data.length > 0) {
							this.contitle = res.data[0].title
						}
						this.datalist = res.data
						this.datalist.forEach((item, index) => {
							item.imgs_arr = item.imgs.split(',')
						})
						console.log("111", this.datalist)

					}
				});
			},
			todetail(id) {
				uni.navigateTo({
					url: '/pages/shop/detail'
				})
			},

			toPx() {
				uni.navigateTo({
					url: '/pages/jewel/train'
				})
			},
			search(res) {
				console.log('11', this.inputVal)
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			sub(e) {
				console.log('e', e)
				uni.navigateTo({
					url: '/pages/goods/goods?keyword=' + e
				})
			},
			//珠宝咨询页面
			toZx() {
				uni.navigateTo({
					url: '/pages/jewel/information'
				})
			},
			clickItem(val) {
				console.log("111", val)
				if (val == '商城推荐') {
					this.getShop()
				}
				this.handleitem = val
			},

			toZbzx() {
				uni.navigateTo({
					url: '/pages/jewel/consult'
				})
			},
			toZbdczs() {
				uni.navigateTo({
					url: '/pages/jewel/certificate'
				})
			},
			toTxz() {
				uni.navigateTo({
					url: '/pages/jewel/reunion'
				})
			},
			goaddConsult() {
				uni.navigateTo({
					url: '/pages/jewel/addConsult'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f5f5f5 !important;
		padding-bottom: 20rpx;
	}

	.shang {
		background: #de2415;
		height: 310rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	/deep/ .uni-searchbar__box-icon-search {
		color: #ffffff !important;
	}

	/deep/ .uni-searchbar__text-placeholder {
		color: #ffffff !important;
	}

	/deep/ .uni-searchbar__box {
		border-radius: 28px !important;
	}

	.zhong {
		height: 500rpx;
		background: #ffffff;
		border-radius: 48rpx 48rpx 0rpx 0rpx;
		margin-top: -100rpx;
	}

	.img {}

	.zhong1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		text-align: center;
	}

	.zhong2 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		text-align: center;
		margin-top: 50rpx;
	}

	.item {
		padding-top: 190rpx;
		padding-left: 98rpx;
		padding-right: 98rpx;
		display: flex;
		text-align: center;
		justify-content: space-between;
	}

	.title {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.xia {
		margin-top: 50rpx;
	}

	.boxzx {
		height: 70rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin-top: 28rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		padding-left: 25rpx;
		align-items: center;
	}

	.zx {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #de2415;
		width: 180rpx;
	}

	.xx {
		margin-left: 40rpx;
		margin-top: 10rpx;
	}

	.ti {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-left: 11rpx;
	}

	.dataitem {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 10px;
		width: 226rpx;
		height: 210rpx;
		background-size: 100% 100%;
	}

	.data {
		margin-top: 28rpx;
		margin-left: 30rpx;
	}

	.itemnum {
		background-size: 100% 100%;
		width: 82rpx;
		height: 50rpx;
		background-image: url("/static/image/zx1.png");
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		line-height: 48rpx;
	}

	.itemname {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
		// margin: 0 auto;
		margin-left: 12rpx;
		margin-top: 20rpx;
	}

	.itemstatus {
		width: 130rpx;
		height: 38rpx;
		border-radius: 19px;
		color: #ffffff;
		font-size: 22rpx;
		margin-left: 12rpx;
		text-align: center;
		line-height: 38rpx;
	}

	.title_box {
		display: flex;
		margin-top: 33rpx;
		padding: 30rpx 0rpx 0rpx 30rpx;
	}

	.dian {
		background-size: 100% 100%;
		width: 35rpx;
		height: 35rpx;
		background-image: url("/static/image/fenxiao26.png");
		position: absolute;
		top: -5px;
		right: 95rpx;
	}

	.noname {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		z-index: 9;
		// width: 100rpx;
	}

	.yname {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		// position: absolute;
		// width: 100rpx;
		left: 20rpx;
		top: 0rpx;
		z-index: 9;
	}

	.zxbox {
		height: 180rpx;
		background: #ffffff;
		border-radius: 28rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
		padding: 10rpx 0rpx 10rpx 10rpx;
		display: flex;
	}

	.box-you {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 26rpx;
	}

	.zxname {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}

	.zxmoney {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #de2415;
	}

	.zxlist {
		// margin-left: 30rpx;
		// margin-right: 30rpx;
		// margin-top: 10rpx;
	}

	.u-content {
		height: 40px !important;
		background: #ffffff52 !important;
		border-radius: 28px !important;
	}
</style>
